<template>
	<view class="navbar">
		<view class="navbar-fixed">
			<!-- 状态栏 -->
			<view :style="'height:' + statusBarHeight + 'px;'"></view>
			<!-- 导航栏内容 -->
			<view class="navbar-content" :style="{height:navBarHeight + 'px',width : windowWidth +'px'}">
				<view class="navbar-serach">
					<view class="navbar-serach_icon">
						<uni-icons type="search" size="16" color="#999"></uni-icons>
					</view>
					<view class="navbar-serach_text">app - vue - uni - app</view>
				</view>
			</view>
		</view>
		<view :style="{height:navBarHeight + statusBarHeight +'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight: 45,
				windowWidth: 375
			}
		},
		methods: {

		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 不在 H5 || APP-PLUS || MP-ALIPAY 上加载这些代码
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取将囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// （胶囊底部高度 - 状态栏的高度） + （胶囊顶部高度 - 状态栏内的高度） = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
				this.windowWidth = menuButtonInfo.left
			// #endif
		}
	}

</script>

<style lang="scss">
	.navbar {
		.navbar-fixed {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 99;
			width: 100%;
			background-color: $mk-base-color;

			.navbar-content {
				height: 45px;
				display: flex;
				// 垂直方向对齐
				justify-content: center;
				// 水平方向对齐
				align-items: center;
				padding: 0 15px;
				box-sizing: border-box;

				.navbar-serach {
					display: flex;
					// 水平方向对齐（flex布局）
					align-items: center;
					height: 30px;
					width: 100%;
					padding: 0 10px;
					background-color: #FFFFFF;
					border-radius: 30px;

					.navbar-serach_icon {
						// width: 10px;
						// height: -1px;
						// border: 1px solid red;
						margin-right: 10px;
					}

					.navbar-serach_text {
						font-size: 12px;
						color: #999;
					}
				}
			}

		}
	}
</style>
